<template>
  <el-cascader v-model="cascader" :options="personnelOptions" :props="cascaderProps" :show-all-levels="false" filterable
    clearable :placeholder="props.placeholder" :filter-method="filterMethod" @change="change" />
</template>
<script setup>
import useCommonStore from "@/store/modules/common";
const commonStore = useCommonStore();
const personnelOptions = computed(() => {
  if (!commonStore.personnelOptions) {
    commonStore.getOrganization()
  }
  return commonStore.personnelOptions
});
const props = defineProps({
  modelValue: [String, Number, Array],
  placeholder: {
    type: String,
    default: '请选择',
  }
});

const cascaderProps = {
  emitPath: false,
  multiple: false,
  label: 'name',
  value: 'user_id',
  children: 'sub',
}

const cascader = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const filterMethod = (node, val) => {
  if (!!~node.text.indexOf(val) || !!~node.text.toUpperCase().indexOf(val.toUpperCase())) {
    return true
  }
}

const emit = defineEmits(['update:modelValue'])
const change = (val) => {
  emit('update:modelValue', val)
}

</script>
<style lang="scss">
.el-cascader__tags {
  z-index: 2;
}
</style>